<div class="layuimini-main">
	<div class="layui-form layuimini-form">

		<form class="layui-form">
			
			<!-- 上部 -->
			<div style="background:#eeeeee; padding:10px 40px;">
				<div class="layui-inline">
					<strong style="font-size:16px;">嘎嘎 / 男 / 0岁</strong>
				</div>
				
				<div class="layui-inline" style="margin-left: 120px;">
					<label class="layui-form-label"> 身高 </label>
					<div class="layui-input-inline">
						<input class="layui-input" placeholder="请输入" />
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label"> 体重 </label>
					<div class="layui-input-inline">
						<input class="layui-input" placeholder="请输入" />
					</div>
				</div>
				
				<div class="layui-inline">
					<button class="layui-btn layui-btn-normal"  lay-submit lay-filter="saveBtn">生成报告单</button>
				</div>
			</div>


			<!-- 下部 -->
			<div style="padding:20px;">
				
				<!-- 血糖 -->
				<div class="layui-form-item">
					<label class="layui-form-label" style="width:140px;">血糖</label>
					<div class="layui-input-inline">
						<input type="text" name="gluResult" lay-verify="gluResult" placeholder="请输入" value="" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 90px;">
						<select name="province" lay-filter="province">
							<option value="">mmol/L</option>
						</select>
					</div>
					<div class="layui-input-inline">
						<select name="gluFoodStatus" lay-filter="province">
							<option value="">空腹</option>
							<option value="">餐后</option>
							<option value="">随机</option>
						</select>
					</div>
				</div>
				
				
				<!-- 血酮 -->
				<div class="layui-form-item">
					<label class="layui-form-label" style="width:140px;">血酮</label>
					<div class="layui-input-inline">
						<input type="text" name="ketResult" lay-verify="gluResult" placeholder="请输入" value="" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 90px;">
						<select name="city" lay-filter="city">
							<option value="">mmol/L</option>
						</select>
					</div>
				</div>
				
				<!-- 血尿酸 -->
				<div class="layui-form-item">
					<label class="layui-form-label" style="width:140px;">血尿酸</label>
					<div class="layui-input-inline">
						<input type="text" name="uaResult" lay-verify="gluResult" placeholder="请输入" value="" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 90px;">
						<select name="area" lay-filter="area">
							<option value="">umol/L</option>
							<option value="">mg/dL</option>
						</select>
					</div>
				</div>
				
				
				<!-- 血尿酸 -->
				<div class="layui-form-item">
					<label class="layui-form-label" style="width:140px;">糖化血红蛋白</label>
					<div class="layui-input-inline">
						<input type="text" name="hbalcResult" lay-verify="gluResult" placeholder="请输入" value="" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 90px;">
						<select name="area" lay-filter="area">
							<option value="">%</option>
						</select>
					</div>
				</div>
				
				
				<!-- 总胆固醇 -->
				<div class="layui-form-item">
					<!-- 总胆固醇 -->
					<label class="layui-form-label" style="width:140px;">总胆固醇</label>
					<div class="layui-input-inline">
						<input type="text" name="cholResult" lay-verify="gluResult" placeholder="请输入" value="" class="layui-input" />
					</div>
					<div class="layui-input-inline" style="width: 90px;">
						<select name="province" lay-filter="province">
							<option value="">mmol/L</option>
						</select>
					</div>
					
					<!-- 甘油三脂 -->
					<label class="layui-form-label" style="width:140px;">甘油三脂</label>
					<div class="layui-input-inline">
						<input type="text" name="tgResult" lay-verify="gluResult" placeholder="请输入" value="" class="layui-input" />
					</div>
					<div class="layui-input-inline" style="width: 90px;">
						<select name="city" lay-filter="city">
							<option value="">mmol/L</option>
						</select>
					</div>
					
					
				</div>
				
				
				<!-- 底密度脂蛋白胆固醇 -->
				<div class="layui-form-item">
					
					<!-- 高密度脂蛋白胆固醇 -->
					<label class="layui-form-label" style="width:140px;">高密度脂蛋白胆固醇</label>
					<div class="layui-input-inline">
						<input type="text" name="hdlCResult" lay-verify="gluResult" placeholder="请输入" value="" class="layui-input" />
					</div>
					<div class="layui-input-inline" style="width: 90px;">
						<select name="area" lay-filter="area">
							<option value="">mmol/L</option>
						</select>
					</div>
					
					
					<!-- 底密度脂蛋白胆固醇 -->
					<label class="layui-form-label" style="width:140px;">底密度脂蛋白胆固醇</label>
					<div class="layui-input-inline">
						<input type="text" name="ldlCResult" lay-verify="gluResult" placeholder="请输入" value="" class="layui-input" />
					</div>
					<div class="layui-input-inline" style="width: 90px;">
						<select name="province" lay-filter="province">
							<option value="">mmol/L</option>
						</select>
					</div>
				</div>
				
				
				<div class="layui-form-item">
					<label class="layui-form-label" style="width:140px;">总胆/高密比值</label>
					<div class="layui-input-inline">
						<input type="text" name="tcHdlCResult" lay-verify="gluResult" placeholder="请输入" value="" class="layui-input" />
					</div>
				</div>
				
				
				<div class="layui-form-item">
					<!-- 收缩压 -->
					<label class="layui-form-label" style="width:140px;">收缩压</label>
					<div class="layui-input-inline">
						<input type="text" name="sbpResult" lay-verify="gluResult" placeholder="请输入" value="" class="layui-input" />
					</div>
					<div class="layui-input-inline" style="width: 90px;">
						<select name="province" lay-filter="province">
							<option value="">mmHg</option>
						</select>
					</div>
					
					<!-- 舒张压 -->
					<label class="layui-form-label" style="width:140px;">舒张压</label>
					<div class="layui-input-inline">
						<input type="text" name="dbpResult" lay-verify="gluResult" placeholder="请输入" value="" class="layui-input" />
					</div>
					<div class="layui-input-inline" style="width: 90px;">
						<select name="city" lay-filter="city">
							<option value="">mmHg</option>
						</select>
					</div>
				</div>
				
				<!-- 备注 -->
				<div class="layui-form-item">
					<label class="layui-form-label" style="width:140px;">备注</label>
					<div class="layui-input-inline" style="width: 70%">
						<input type="text" name="remark" autocomplete="off" placeholder="请输入" class="layui-input">
					</div>
				</div>
				
			</div>
		
		</form>
	</div>
</div>

<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script>
	layui.use(['form', 'table', 'layarea'], function() {
		var form = layui.form,
			layer = layui.layer,
			table = layui.table,
			layarea = layui.layarea,
			$ = layui.$;
		/**
		 * 初始化表单，要加上，不然刷新部分组件可能会不加载
		 */
		form.render();
		// 当前弹出层，防止ID被覆盖
		var parentIndex = layer.index;



		//自定义验证规则
		form.verify({
			//第一种写法
			username: function(value, item) { //value控件值，item表单DOM对象
				if (value.length == 0) {
					return '用户名不能为空';
				}
				if (!new RegExp("^[a-zA-Z0-9_-]{6,16}$").test(value)) { //用户名正则，6到16位（字母，数字，下划线，减号）
					return '用户名必须在6~16位';
				}
			},
			//第二种写法
			password: [/^[a-zA-Z0-9_-]{6,16}$/, '密码必须在6~16位']
			//sex:[/^正则表达式$/, '弹出消息']

		});




		//监听提交
		form.on('submit(saveBtn)', function(data) {
			//获得表单数据
			var formData = data.field;
			console.log(formData);

			// //弹出信息让用户确认
			// var index = layer.alert(JSON.stringify(formData), {
			//     title: '确认提交信息',
			// 	//TODO:提交表单数据

			// 	console.log('提交')

			// }, function () {
			//     // 关闭弹出层
			//     layer.close(index);
			//     layer.close(parentIndex);
			// })
			// 当前弹出层，防止ID被覆盖
			var parentIndex = layer.index;

			//处理地址数据
			var address = "";
			if (formData.county != "") { //区不为空字符串
				address = formData.county; //430121
			} else {
				if (formData.city != "") {
					address = formData.city;
				} else {
					address = formData.province;
				}
			}

			if (address != "") {
				address += ',' + formData.address; //430101,四方坪
			}

			//处理表单数据
			var postData = {
				'gluResult': formData.gluResult,
				'gluFoodStatus': formData.gluFoodStatus,
				'hbalcResult': formData.hbalcResult,
				'uaResult': formData.uaResult,
				'hdlCResult': formData.hdlCResult	,
				'ldlCResult': formData.ldlCResult,
				'tgResult': formData.tgResult,
				'cholResult': formData.cholResult,
				'tcHdlCResult': formData.tcHdlCResult,
				'ketResult': formData.ketResult,
				'sbpResult': formData.sbpResult,
				'dbpResult': formData.dbpResult,
				'remark': formData.remark
			}
			console.log(postData);

			//通过ajax请求提交
			$.ajax({
				url: 'http://localhost:8002/sccMedicalResult/ins',
				type: 'post',
				data: JSON.stringify(postData),
				contentType: "application/json;charset=UTF-8",
				success: function(result) {
					console.log(result);
					//关闭弹出层
					layer.close(parentIndex);
				},
				error: function(result) {
					console.log(result);
				}

			});

			return false;
		});

	});
</script>
